<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
				box-sizing: border-box;
			}
			#list ,img,h4,#list div{
				float: left;
			}
			#list img:nth-child(2){
				padding:  0 20px;
			}
			.container{
			width: 1200px;
				margin: auto;
			}
			.container::before,
			.container::after{
				content: "";
				clear: both;
				display: block;
			}
		</style>
	</head>
	<body>
<div class="container">
		<button id="btn">换一换</button>
		<hr>
		<div id="list"></div>
</div>

		
		
		<script>

		var pag = 1;
		var btn=document.querySelector('#btn');
		btn.onclick=function () {
			if (pag<4){
				pag++;
				document.querySelector("#list").innerHTML = ""
				loadXMLDoc();
			}else{
				pag=1
				document.querySelector("#list").innerHTML = ""
				loadXMLDoc();
			}
		}





	function loadXMLDoc() {


			var xmlhttp;
	if (window.XMLHttpRequest)
	{
		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();
	}
	else
	{
		// IE6, IE5 浏览器执行代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200) {
			var json = xmlhttp.responseText;
			json = JSON.parse(json);
			for (var i = 0; i < json.shop.length; i++) {
				console.log(json.shop);
				var img = document.createElement("img");
				img.src = json.shop[i].img;
				var h4 = document.createElement("h4");
				h4.innerHTML = json.shop[i].h4;
				var p = document.createElement("p");
				p.innerHTML = json.shop[i].price
				var div = document.createElement("div")
				div.appendChild(img)
				div.appendChild(h4)
				div.appendChild(p)
				console.log(div)
				document.querySelector("#list").appendChild(div)
			}
		}
	}
	xmlhttp.open("GET",pag+".json",true);
	xmlhttp.send();
		}

	loadXMLDoc()
		</script>
	</body>
</html>
